<!-- 联系客服公共组件 -->
<template>
  <view class="contact-service" @click="handleClick">
    <uni-icons type="headphones" size="30"></uni-icons>
    <view>联系客服</view>
  </view>

  <uni-popup ref="popup" type="bottom" background-color="#fff" safe-area>
    <view class="box">
      <!-- TODO这里需要获取用户登录存储到本地的手机号 -->
      <view class="phone">{{ props.phone }}</view>
      <view class="call" @click="handleCall">呼叫</view>
      <view class="close" @click="handleClose">取消</view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { ref, defineProps } from "vue";

//获取父组件传递的手机号
//定义props 接收父组件传递的手机号
const props = defineProps({
  phone: {
    type: String,
    default: "1380343434",
  },
});

const popup = ref<any>(null);

function handleClick() {
  if (!popup.value) {
    return;
  }
  popup.value.open("bottom");
}

//用户点击取消按钮 关闭弹窗
function handleClose() {
  if (!popup.value) {
    return;
  }
  popup.value.close();
}

//用户点击呼叫按钮 拨打电话
function handleCall() {
  uni.showToast({
    title: "呼叫中...",
    icon: "loading",
    duration: 2000,
    complete: () => {
      //关闭弹窗
      handleClose();
    },
  });
}
</script>

<style scoped lang="scss">
.contact-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200rpx;
  height: 150rpx;
  border-radius: 40rpx;
  position: fixed;
  bottom: 40rpx;
  left: 20rpx;
}

.box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 300rpx;
  font-size: 30rpx;
  font-weight: 500;
  .phone {
    flex: 1;
    font-weight: 700;
    border-bottom: 1rpx solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .call {
    flex: 1;
    font-size: 40rpx;
    border-bottom: 1rpx solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .close {
    flex: 1;
    font-size: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
